<!DOCTYPE html>

<!--
    This is a slightly modified version of
    rrdJFlot.html page found in the javascriptRRD package.
    See http://javascriptrrd.sourceforge.net/ for more details.
-->

<html>
  
    <script type="text/javascript" src="lib/javascriptrrd.wlibs.js"></script>
  <head>
    <title>RRD Graphs</title>
  </head>

  <body>
    RRD URL:
    <input type="text" id="input_fname" value=".rrd"
           onchange="fname_update()">
     <button onclick="fname_update()">Load</button>
    <hr>

    <table id="infotable" border=1>
        <tr><td colspan="21"><b>Javascript needed for this page to work</b></td></tr>
    </table>

    <div id="mygraph"></div>

    <script type="text/javascript">
        // Remove the Javascript warning
        document.getElementById("infotable").deleteRow(0);

        var graph_opts={legend: { noColumns:4}};
        var ds_graph_opts={'Oscilator':{ color: "#ff8000",
                                        lines: { show: true, fill: true, fillColor:"#ffff80"}},
                            'Idle':{ label: 'IdleJobs', color: "#00c0c0",
                                        lines: { show: true, fill: true}},
                            'Running':{color: "#000000",yaxis:2}};
        var rrdflot_defaults={ num_cb_rows:9, use_element_buttons: true,
            use_windows:true, window_min:1241752800000,window_max:1241974500000,
            graph_width:"700px",graph_height:"300px", scale_width:"350px", scale_height:"200px",
            timezone: "local"};
        flot_obj=new rrdFlotAsync("mygraph",null,null,graph_opts,ds_graph_opts,rrdflot_defaults);

        // this function is invoked when the RRD file name changes
        function fname_update() {
            var fname=document.getElementById("input_fname").value;
            flot_obj.reload(fname);
        }

    </script>
  </body>
</html>
